<template>
  <div id="registerEchart" style="width: 100%; height: 30vh;"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    dataList: {
      type: Object,
      default: {}
    }
  },
  name: 'registerEchart',
  data() {
    return {
      myEchart3: '',
      thisWeek: [],
      lastWeek:[],
      xData: []
    }
  },
  computed: {},
  watch: {
    dataList: {
      // 自动触发,只能使用handler
      handler(newVal, oldVal) {
        this.getData()
      }
    }
  },
  // mounted() {
  //   this.getData()
  // },
  methods: {
    getData() {
      this.xData=[]
      this.thisWeek=[]
      this.lastWeek=[]
      if(this.dataList.thisWeek){
        this.dataList.thisWeek.forEach(item => {
          this.xData.push(item.countTime)
          this.thisWeek.push(item.countNumber)
        });
      }
      if(this.dataList.lastWeek){
        this.dataList.lastWeek.forEach(item => {
          this.lastWeek.push(item.countNumber)
        });
      }
      this.openChart()
    },
    openChart() {
      this.$nextTick(function () {
        if (this.myEchart3 != null && this.myEchart3 != '' && this.myEchart3 != undefined) {
          // 销毁
          this.myEchart3.dispose()
        }
        this.myEchart3 = echarts.init(document.getElementById('registerEchart'))

        const option = {
          color: ['#5088EC', '#68BCC4'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: true,
            itemHeight: 12,
            itemWidth: 18,
            textStyle: {
              // 图例文字的样式
              color: '#666',
              fontSize: 13
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '0%',
            top: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#666'
            },
            data: this.xData
          },
          yAxis: {
            type: 'value',
            // name: '注册数(个)',
            // nameTextStyle: {
            //   color: '#666666',
            //   fontSize: 13
            // },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F1F1F1'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series: [
            {
              type: 'bar',
              name: '本周',
              barWidth: 30,
              stack: 'all',
              data: this.thisWeek
            },
            {
              type: 'bar',
              name: '上周',
              barWidth: 30,
              stack: 'all',
              data: this.lastWeek
            }
          ]
        }

        this.myEchart3.setOption(option)
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>